<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>淘宝网- 淘！我喜欢</title>
		<link rel="stylesheet" type="text/css" href="./css/index.css"/>
		<link rel="icon" href="favicon.ico">
		<base target="_blank">
	</head>
	<body>
		
		<!-- 头部信息 -->
		<div id="headMessage" class="layer clearfix">
			<ul class="fl"></ul>
				<li>
					<span>中国大陆</span>
					<span class="iconfont arrow">&#xe60c;</span>
				</li>
				<li class="mr7">
					<a href="#" class="login mr7">亲，请登录</a>
					<a href="#">免费注册</a>
				</li>
				<li>
					<a href="#">手机逛淘宝</a>
				</li>
				
			<ul class="fr">
				<li>
					<a href="">我的淘宝</a>
					<span class="iconfont arrow">&#xe60c;</span>
				</li>
				<li>
					<span class="iconfont mr5 c4">&#xe641;</span>
					<a href="#">购物车</a>
					<strong>0</strong>
					<span class="iconfont arrow">&#xe60c;</span>
				</li>
				<li>
					<a href="#"><span class="iconfont mr5 store">&#x3432;</span>收藏夹</a>
					<span class="iconfont arrow">&#xe60c;</span>
				</li>
				<li>
					<a href="#">商品分类</a>
				</li>
				<li class="line">|</li>
				<li>
					<a href="#">千牛卖家中心</a>
					<span class="iconfont arrow">&#xe60c;</span>
				</li>
				<li>
					<a href="#">联系客服</a>
					<span class="iconfont arrow">&#xe60c;</span>
				</li>
				<li>
					<span class="iconfont mr5 c4">&#xe609;</span>
					<a href="#">网站导航</a>
					<span class="iconfont arrow">&#xe60c;</span>
				</li>				
			</ul>
		</div>
		
		<!-- 头部搜索	 -->
		<div id="headSearch">
			<div class="layer clearfix">
				<h1 class="fl"><a href="#">淘宝网</a></h1>
				
				<div class="code fr">
					<span class="iconfont close">&#xe695;</span>
					<span class="c5">手机淘宝</span>
					<img src="images/erweima.png" alt="">
				</div>
				
				<div class="search">
					<ul class="searchTab clearfix">
						<li class="active">宝贝</li>
						<li>天猫</li>
						<li>店铺</li>
					</ul>
					
					<div class="searchContent clearfix">
						<form action="#">
						<div class="searchBox fl">
							<input type="text">
							<div class="placeholder">
								<i class="iconfont">&#xe604;</i>
								<span>网红裤腰带</span>
							</div>
							<span class="iconfont imgSearch">&#xe6b0;</span>
						</div>
						<div class="btn fl">
							<button type="submit">搜索</button>
						</div>							
						</form>
					</div>
					
					<div class="hotkey">    
						<a href="">新款连衣裙</a>
						<a href="">四件套</a>
						<a href="">潮流T恤</a>
						<a href="">时尚女鞋</a>
						<a href="" class="c5">短裤</a>
						<a href="">半身裙</a>
						<a href="">男士外套</a>
						<a href="">墙纸</a>
						<a href="">行车记录仪</a>
						<a href="">新款男鞋</a>
						<a href="" class="c5">耳机</a>
						<a href="">时尚女包</a>
						<a href="">沙发</a>
					</div>
				</div>
				
			</div>
		</div>
		
		<!-- 导航 -->
		<div id="nav" class="layer clearfix">
			<h2 class="fl">主题市场</h2>
			<ul>
				<li class="size"><a href="">天猫</a></li>
				<li><a href="">聚划算</a></li>
				<li><a href="">天猫超市</a></li>
				<li class="line">|</li>
				<li><a href="">淘抢购</a></li>
				<li><a href="">电器城</a></li>
				<li><a href="">司法拍卖</a></li>
				<li><a href="">司法拍卖</a></li>
				<li><a href="">兴农扶贫</a></li>
				<li class="line">|</li>
				<li><a href="">飞猪旅行</a></li>
				<li><a href="">智能生活</a></li>
				<li><a href="">苏宁易购</a></li>
			</ul>
		</div>
		
		<!-- 首屏内容 -->
		<div id="firstScreen" class="layer clearfix">
			<!-- 左边的内容 -->
			<div class="firstLeft fl">
				<!-- 侧边导航 -->
				<div class="sideNav fl">
					<ul>
						<li>
							<a href="#">女装</a> /
							<a href="#">男装</a> /
							<a href="#">内衣</a><span class="iconfont fr">&#xe618;</span>
						</li>
						
						<li>
							<a href="#">鞋靴</a> /
							<a href="#">箱包</a> /
							<a href="#">配件</a><span class="iconfont fr">&#xe618;</span>
						</li>
						
					</ul>
				</div>
				<!-- 图片1容器 -->
				<div class="img1Box fr">
					<div class="pic fl">
						<div class="img">
							<a href=""><img src="./images/pic.jpg" alt=""></a>
						</div>
						
						<button class="iconfont leftBtn">&#xe63b;</button>
						<button class="iconfont rightBtn">&#xe618;</button>
						
						<div class="circle">
							<span class="active"></span><span></span><span></span><span></span><span></span>
						</div>
					</div>
					<div class="ad fr">
						<a href=""><img src="images/ad.webp" alt=""></a>
					</div>
				</div>
				<!-- 图片2容器 -->
				<div class="img2Box fr">
					<div class="pic fl">
						<div class="picTitle">
							<div class="text clearfix">
								<span class="fl bg">理想生活上天猫</span>
								<span class="fr"><i>1</i>/6</span>
							</div>
							<div class="line">
								<span></span>
							</div>
						</div>
						<div class="img">
							<a href=""><img src="images/img2_1.jpg" alt=""></a>
							<a href=""><img src="images/img2_2.jpg" alt=""></a>
						</div>
						<button class="iconfont leftBtn">&#xe63b;</button>
						<button class="iconfont rightBtn">&#xe618;</button>
					</div>
					<div class="ad fr">
						<p class="title">今日特卖</p>
						<a href=""><img src="images/img2_3.jpg" alt=""></a>
					</div>
				</div>
				<!-- 淘宝头条 -->
				<div class="news fl">
					淘宝头条
				</div>
			</div>
			<!-- 右边的内容 -->
			<div class="firstRight fr">
				
			</div>
		</div>
		
		<!-- 有好货与爱逛街 -->
		<div id="layer">
			
		</div>
		
		<!-- 右侧固定定位导航 -->
		<div id="foot">
			
		</div>
		
	</body>
</html>
